<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="男女混合" name="first">
      <UserListItem v-for="(user,index) in all" :key="index" :avatar="user[1]" :name="user[0]"></UserListItem>
    </el-tab-pane>
    <el-tab-pane label="男生" name="second">
      <UserListItem v-for="(user,index) in male" :key="index" :avatar="user[1]" :name="user[0]"></UserListItem>
    </el-tab-pane>
    <el-tab-pane label="女生" name="third">
      <UserListItem v-for="(user,index) in female" :key="index" :avatar="user[1]" :name="user[0]"></UserListItem>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
import {allData, female, male} from "@/data/sex";
import UserListItem from "@/components/user/userListItem";
import {getUser} from "@/utils/electron";

export default {
  name: "UserLists",
  components: {UserListItem},
  data() {
    return {
      activeName: 'first',
      all:[],
      male:[],
      female:[]
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab.index);

    }
  },
  mounted() {
    this.all = allData.map(item => {
      return getUser(item)
    });
    this.male = male.map(item => {
      return getUser(item)
    });
    this.female = female.map(item => {
      return getUser(item)
    });
  }
}
</script>

<style scoped>
.el-tabs{
  width: 100%;
  height: 100%;
  background-color: #fff;
  overflow-y: scroll;
  padding: 20px;
  box-shadow: 2px 5px 20px -3px rgba(44, 138, 248, .18);
}
.el-tabs .el-container{
  width: 100%;
  height: 100%;
}
.el-tabs .el-tab-pane{
  width: 100%;
  height: 540px;
  overflow-y: scroll;
}
</style>
